<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/5.
     */
    import axios from 'axios'

    export default {
        data () {
            return {
                loading: false,
                form: {
                    username: '',
                    password: '',
                },

                rules: {
                    username: [
                        {required: true, message: '请填写用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                    ]
                },
            }
        },
        computed: {},
        beforeRouteEnter (to, from, next) {
            axios.get(apiHost + '/user_info/', {
                withCredentials: true,
                params: {time: new Date().getTime()}
            }).then(res => {
                next('/home/statistic/1,2,3')
            }).catch(e => {
                next()
            })
        },
        mounted () {

        },
        methods: {
            login() {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let postData = new FormData()
                        postData.append('username', this.form.username)
                        postData.append('password', this.form.password)
                        this.loading = true
                        let res = await this.api.login(postData)
                        if (res.success) {
                            this.$router.push('/home/statistic/1,2,3');
                        }
                        this.loading = false
                    }
                })

            }
        },
    };
</script>

<template>
  <div class="login" layout="row center-center">
    <div class="login__form">
      <img src="../imgs/logo.png" alt="blink-photo" class="login__logo">
      <div class="login__box">
        <Form ref="form" :model="form" :rules="rules">
          <Form-item prop="username">
            <Input v-model="form.username" placeholder="用户名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input v-model="form.password" type="password" placeholder="密码">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
        </Form>
        <Button type="primary" :loading="loading" long @click="login">登录</Button>
      </div>

    </div>
  </div>
</template>

<style lang="scss">
  @import "../sass/index";
</style>